
<template>
  <div class="system-user-container">
    <el-dialog title="组织架构" v-model="show" width="756px">
    <el-row :gutter="10">
      <el-col :span="8">
          <vxe-table
              height="590"
              :data="deptData"  show-footer :footer-method="footerMethod"
              @cell-click="handleNodeClick"
              size="mini"
              :tree-config="{rowField: 'deptId', accordion: true, line: true, iconOpen: 'vxe-icon-square-minus', iconClose: 'vxe-icon-square-plus', expandAll: true}">
            <vxe-column field="deptId" title="deptName" :visible="false"></vxe-column>
            <vxe-column field="deptName" title="部门名称" tree-node></vxe-column>
          </vxe-table>
      </el-col>
      <el-col :span="16">
        <el-card shadow="hover">
          <vxe-grid v-bind="gridOptions" ref="User">
            <template #name_item="{ data }">
              <vxe-input v-model="data.name" type="text" placeholder="请输入名称"></vxe-input>
            </template>
            <template #submit_item>
              <vxe-button type="submit" status="primary" content="查询"></vxe-button>
            </template>
            <template #reset_item>
              <vxe-button type="reset" content="重置"></vxe-button>
            </template>
          </vxe-grid>
        </el-card>
      </el-col>
    </el-row>
      <p style="text-align: center;padding-top:10px " >
      <vxe-button status="primary" @click="selectUser" content="确认选择"></vxe-button>
    </p>
    </el-dialog>


  </div>
</template>

<script>
import {toRefs, reactive, onMounted, ref, watch} from 'vue';
import { Search } from '@element-plus/icons-vue'
import {getUserList, getDeptTree} from '/@/api/system/user/index';
import XEUtils, {assign} from 'xe-utils'


export default {
  name: 'organization',
  emits:["selectUser"],
  setup(props,ctx) {
    const gridOptions = reactive({
      border: true,
      showOverflow: true,
      height: 550,
      size:'mini',
      columnConfig: {
        resizable: true
      },
      rowConfig: {
        keyField: 'id'
      },
      pagerConfig: {
        pageSize: 10
      },
      formConfig: {
        items: [
          { field: 'name', title: '名称', itemRender: {}, slots: { default: 'name_item' } },
          { itemRender: {}, slots: { default: 'submit_item' } },
          { itemRender: {}, slots: { default: 'reset_item' } }
        ]
      },
      proxyConfig: {
        form: true, // 启用表单代理
        ajax: {
          // 接收 Promise API
          query: ({ page, form }) => {
            return new Promise(resolve => {
              form.deptId=state.deptSelectID
              page= XEUtils.assign(page, form)
              getUserList(page).then((res)=>{
                resolve({
                  result: res.data.userList||[],
                  page: {
                    total: res.data.total
                  }
                })
              });
            })
          }
        }
      },
      columns: [
        { type: 'seq', width: 40 },
        { type: 'checkbox', width: 40 },
        { field: 'userName', title: '账号', showOverflow: true},
        { field: 'userNickname', title: '名称', showOverflow: true }
      ]
    })

    const User = ref();
    const filterText = ref('');
    const treeRef = ref();
    const search = Search
    const state = reactive({
      show:false,
      ids:[],
      deptProps:{
        id:"deptId",
        children: "children",
        label: "deptName"
      },
      deptSelectID:0,
      deptSelectName:'',
      deptData:[],

    });
    const showDialog = ()=>{
      state.show=!state.show
    };
    // 初始化表格数据
    const initTableData = () => {
      getDeptTree().then((res)=>{
        state.deptData = res.data.deps
      })
    };
    // 页面加载时
    watch(() =>state.show,
        (newValue, oldValue) => {
        if (newValue){
            initTableData()
        }
        });
    const deptFilterNode = (value, data) => {
      if (!value) return true;
      return data.label.includes(value)
    };
    // 多选框选中数据
    const selectUser = ()=> {
     // state.ids = selection.map(item => item.id)
      ctx.emit("selectUser", User.value.getCheckboxRecords());
      User.value.setAllCheckboxRow(false)

      showDialog()
    };
    // 节点单击事件
    const handleNodeClick = ({row}) => {
       state.deptSelectID= row.deptId;
      state.deptSelectName= row.deptName;
      User.value.commitProxy('query')
      User.value.updateFooter()
    };

    // 节点单击事件
    const footerMethod = ({ columns, data }) => {
       return  [['部门->'+state.deptSelectName] ]
    };


    return {
      deptFilterNode,
      filterText,gridOptions,
      treeRef,User,footerMethod,
      search,showDialog       ,
      handleNodeClick,selectUser,
      ...toRefs(state),
    };
  },
};
</script>
